<template>
    <div>


        <el-card class="box-card">
            <el-row>
                <el-page-header @back="goBack" content="商品详情">
                </el-page-header>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-image v-if="product.image !== undefined" :src="product.image"
                              style="width: 450px;height: 450px"></el-image>
                </el-col>
                <el-col :span="12" style="margin-top: 20px">

                    <el-row style="margin-top: 10px">
                        <span style="font-size: 20px">{{ product.name }}</span>
                    </el-row>

                    <el-row style="margin-top: 10px">
                        <span style="font-size: 12px;color: #99a9bf">已售：{{ product.sales }}</span>
                    </el-row>

                    <el-row style="margin-top: 20px">
                        <span style="font-size: 25px;color: #ff8211">超值优惠：￥{{ product.price }}</span>
                    </el-row>

                    <el-row style="margin-top: 30px">
                        <div style="">商家地址：{{ store.address }}</div>
                        <div style="margin-left: 70px">快递免运费</div>
                    </el-row>

                    <el-row style="margin-top: 50px">
                            <span style="font-size: 18px">
                                数量：
                                <!--                            <el-input-number
                                                                    :disabled="this.numberStatus"
                                                                    v-model="quantity"
                                                                    :min="1" :max="this.maxQuantity"
                                                                    size="small"
                                                            ></el-input-number>-->

                                <span style="font-size: 13px;margin-left: 20px">库存：{{ product.stock }}</span>
                            </span>
                    </el-row>

                </el-col>
            </el-row>

            <el-row :gutter="10">
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick" style="background-color: #f7f7f7">
                        <el-tab-pane label="商品介绍" name="first">
                            <el-image v-if="product.detailImg !== undefined" style="width: 100%"
                                      :src="product.detailImg"></el-image>
                        </el-tab-pane>
                        <!--                            <el-tab-pane label="商品评价" name="second">商品评价</el-tab-pane>-->
                    </el-tabs>
                </template>
            </el-row>
        </el-card>


    </div>
</template>


<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "ProductInfo",
    data() {
        return {
            account: {},
            userId: '',
            favoriteId: '',
            favorite: {},
            productId: '',
            product: {},
            store: {},
            storeId: '',
            quantity: 1,            // 购买的数量
            maxQuantity: 10,
            numberStatus: false,
            isFavorite: false,
            activeName: 'first',
            cartId: '',
            cart: {},


        }
    },
    mounted() {
        // 进入页面就加载用户信息
        this.account = JSON.parse(localStorage.getItem('account'))
        this.userId = this.account.id
        this.productId = this.$route.query.id

        // 跳转到该页面时候未携带参数，则返回
        if (this.productId === '' || this.productId === undefined || this.productId === null) {
            this.goBack()
            return
        }
        this.loadProductAndStore()

        // console.log(this.maxQuantity)

    },
    methods: {

        checkFavorite() {
            this.$request.post('/userFavoriteProduct/checkFavoriteByUserIdAndProductId?userId=' + this.userId + '&productId=' + this.productId).then(res => {
                if (res.code === '200') {
                    if (res.data === null || res.data === undefined || res.data === '') {
                        this.isFavorite = false
                    } else {
                        this.favoriteId = res.data.id
                        this.favorite = res.data
                        this.isFavorite = true
                    }
                    // console.log(this.favoriteId)
                    // console.log(this.favorite)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },

        loadStore() {
            this.$request.get('/store/storeInfo?id=' + this.product.storeId).then(res => {
                if (res.code === '200') {
                    this.store = res.data
                    // console.log(this.store)
                }
            })
        },

        loadProductAndStore() {
            this.$request.get('/product/productInfo?id=' + this.productId).then(res => {
                if (res.code === '200') {
                    this.product = res.data
                    this.storeId = this.product.storeId
                    // console.log(this.product)
                    if (this.product.stock <= 0) {
                        console.log('库存不足')
                        this.numberStatus = true
                    } else {
                        this.numberStatus = false
                    }
                    // 优化：购买的最大数量
                    this.maxQuantity = this.product.stock > 10 ? 10 : this.product.stock
                    this.loadStore()
                }
            })
        },

        goBack() {
            this.$router.go(-1)
        },

        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
})
</script>


<style scoped>

</style>